import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, AlertTriangle, Loader2, ChevronRight, Calendar, Box } from 'lucide-react';
import { chapterAPI, modelAPI } from '../../api/api';
import './UserChapterDetail.css';

function UserChapterDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [chapter, setChapter] = useState(null);
  const [models, setModels] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const loadData = async () => {
    try {
      setLoading(true);
      const [chapterData, modelsData] = await Promise.all([
        chapterAPI.getById(id),
        modelAPI.getAll(id)
      ]);
      setChapter(chapterData);
      setModels(modelsData);
      setError(null);
    } catch (err) {
      setError('加载数据失败: ' + err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  if (loading) {
    return (
      <div className="user-chapter-detail">
        <div className="loading-spinner">
          <Loader2 className="spinner-icon" />
          <p>加载中...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="user-chapter-detail">
        <div className="error-state">
          <AlertTriangle className="error-icon" />
          <p>{error}</p>
          <button onClick={loadData} className="btn btn-primary">重试</button>
        </div>
      </div>
    );
  }

  return (
    <div className="user-chapter-detail">
      <div className="detail-header">
        <div className="header-content">
          <button onClick={() => navigate('/')} className="btn btn-secondary back-btn">
            <ArrowLeft size={18} />
            返回首页
          </button>
          <div className="chapter-info">
            <h1>{chapter.title}</h1>
            <p>{chapter.description}</p>
          </div>
        </div>
      </div>

      <div className="models-section">
        <div className="models-grid">
          {models.map((model, index) => (
            <div 
              key={model.id} 
              className="model-card card fade-in"
              style={{ animationDelay: `${index * 0.05}s` }}
              onClick={() => navigate(`/model/${model.id}`)}
            >
              {model.is_special === 1 && (
                <div className="special-badge badge badge-warning">特殊模型</div>
              )}
              <h3 className="model-title">{model.title}</h3>
              <div className="model-footer">
                <div className="model-date">
                  <Calendar size={14} />
                  <span>{new Date(model.created_at).toLocaleDateString()}</span>
                </div>
                <ChevronRight className="model-arrow" size={20} />
              </div>
            </div>
          ))}

          {models.length === 0 && (
            <div className="empty-models">
              <Box className="empty-icon" size={48} />
              <p>该章节暂无模型</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default UserChapterDetail;

